<template>
  <div class="app-container">
    <!-- 实验室开放增加表单 -->
    <el-form ref="openForm" :model="open" :rules="rules" label-width="150px">
      <el-form-item label="所属实验分室:" prop="labId">
        <el-select v-model="open.labId" placeholder="请选择实验分室" style="width: 100%">
          <el-option v-for="item in labSub" :key="item.id" :label="item.labName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="负责人姓名:" prop="name">
        <el-input v-model.trim="open.name" placeholder="请输入负责人姓名" />
      </el-form-item>
      <el-form-item label="负责人性别">
        <el-select v-model="open.sex" style="width: 100%" placeholder="请选择负责人性别">
          <el-option value="男" label="男" />
          <el-option value="女" label="女" />
          <el-option value="未知" label="未知" />
        </el-select>
      </el-form-item>
      <el-form-item label="负责人电话:" prop="phone">
        <el-input v-model.trim="open.phone" placeholder="请输入负责人电话" />
      </el-form-item>
      <el-form-item label="实验室开放时间:" prop="startTime">
        <div class="block">
          <el-date-picker
            v-model.trim="open.startTime"
            style="width: 100%"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="请选择实验室开放时间"
          />
        </div>
      </el-form-item>
      <el-form-item label="实验室关闭时间:" prop="stopTime">
        <div class="block">
          <el-date-picker
            v-model.trim="open.stopTime"
            style="width: 100%"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="请选择实验室关闭时间"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="default" @click="$router.go(-1)">返回</el-button>
        <el-button type="info" @click="reset">重置</el-button>
        <el-button type="primary" @click="saveSourse">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入api接口定义的js文件
import labSubApi from '@/api/labSub'
import openApi from '@/api/open'

export default {
  data() {
    return {
      // 定义表单绑定对象
      open: {
        name: '',
        sex: '男',
        phone: '',
        startTime: '',
        stopTime: '',
        labId: ''
      },
      labSub: [],
      isEdit: false,
      rules: {
        name: [{ required: true, message: '负责人姓名不能为空', trigger: 'blur' }],
        phone: [
          { required: true, message: '负责人电话不能为空', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号码格式错误',
            trigger: ['blur', 'change']
          }
        ],
        startTime: [{ required: true, message: '请选择实验室开放时间', trigger: 'change' }],
        stopTime: [{ required: true, message: '请选择实验室关闭时间', trigger: 'change' }],
        labId: [{ required: true, message: '请选择实验室', trigger: 'change' }]
      }
    }
  },
  created() {
    const id = this.$route.params.id
    this.isEdit = !!id

    if (this.isEdit) {
      this.getById(id)
    }

    this.getLabSub()
  },
  methods: {
    // 查询所有分室信息
    getLabSub() {
      labSubApi.getList().then((response) => {
        this.labSub = response.data
      })
    },

    // 根据id获取
    getById(id) {
      openApi.getById(id).then((res) => {
        this.open = res.data
      })
    },

    // 添加
    saveSourse() {
      this.$refs['openForm'].validate((valid) => {
        if (valid) {
          const apiCall = this.isEdit ? openApi.update(this.open) : openApi.save(this.open)

          apiCall.then((res) => {
            const message = this.isEdit ? '修改成功' : '添加成功'
            this.$message.success(message)
            this.$router.push({ path: '/open/index' })
          })
        }
      })
    },

    // 重置
    reset() {
      if (this.isEdit) {
        this.getById(this.$route.params.id)
      }

      this.$refs['openForm'].resetFields()
    }
  }
}
</script>

<style></style>
